<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="AcelleSystemLayouts">
    <title>3</title>
    <!-- Bootstrap core CSS -->
    <link href="{{asset('order/css/bootstrap.min.css')}}" rel="stylesheet">

    <link href="{{asset('order/css/style.css')}}" rel="stylesheet">
    <link href="{{asset('order/js/layui/css/layui.css')}}" rel="stylesheet">
</head>

<body>
<div class="o-page">
    <div class="o-title">Manage your booking</div>
    <div class="o-des c-m">
        <p>Your booking reference:<span>DLTYKR</span></p>
        <p>Booking status: <span>Confirmed</span></p>
        <p>Booking date: <span>{{date('Y-m-d',strtotime($records->first()->created_at))}}</span></p>
    </div>
    <div class="itinerary c-m">
        <h4 class="title">Your itinerary</h4>
        @foreach($records as $k=> $record)
            <div class="list-box">
                <div class="des"> @if($k==0) Departure @else Return @endif</div>
                <div class="list">
                        <div class="item">
                            <div class="name">
                                <span>{{$record->getFlightInfo->start_airport}}</span><span class="svg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-5 h-5">
                                        <path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
                                    </svg>
                                </span>
                                <span>{{$record->getFlightInfo->end_airport}}</span>
                            </div>
                            <div class="day">{{$record->date}}</div>
                            <div class="s-btn-box"><span class="s-btn">SAVER</span></div>
                        </div>
                        <div class="item">
                            <div class="s-time">
                                <h4><span class="sp-1">{{$record->getFlightInfo->start_fly_time}} -</span> <span class="sp-2"></span>{{$record->getFlightInfo->start_airport}}</h4>
                                <div class="st-2">Macau International Airport</div>
                            </div>
                            <div class="line">
                                <div class="l-1">
                                    <div class="hr-box">
                                        <hr>
                                        <img src="{{asset('order/image/icons/itinerary-plane1.svg')}}">
                                    </div>

                                </div>
                                <div class="l-2">Non-stop, {{$record->during}}</div>
                            </div>
                            <div class="e-time">
                                <div class="st-1">
                                    <h4><span class="sp-1">{{$record->getFlightInfo->end_fly_time}} -</span> <span class="sp-2"></span>{{$record->getFlightInfo->end_airport}}</h4>
                                    <div class="st-1-des">Macau International Airport</div>
                                </div>
                                <div class="st-2">
                                    <div class="d-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plane-takeoff w-4 h-4"><path d="M2 22h20"></path><path d="M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"></path></svg></div>
                                    <div class="d-1">{{$record->getFlightInfo->flight_no}}</div>
                                </div>

                            </div>

                            <div class="detail">View details ></div>


                        </div>
                    </div>
            </div>
        @endforeach
    </div>

    <div class="passengers c-m">
        <h4 class="title">Passengers</h4>
        <div class="list">
            @foreach($records as $record)
            <div class="item">

                    <div class="pa-1">
                        <div class="name-box">
                            <div class="tag">{{$record->sub_name}}</div>
                            <div class="name"><span>{{$record->name}}</span>( {{$record->passenger_type}} )</div>
                        </div>
                        <div class="icon">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-[20px] text-[#333] group-open:rotate-180 transition" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"></path></svg>
                        </div>
                    </div>

            </div>
            @endforeach
        </div>

    </div>
    <div class="contact c-m">
        <h4 class="title">Contact Information</h4>
        <div class="list">
            <div class="item">
                <div class="pa-1">
                    <div class="name-box">
                        <div class="name"><span>YANGYUJIE YANGYUJIE </span></div>
                    </div>
                    <div class="icon">
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-[20px] text-[#333] group-open:rotate-180 transition" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"></path></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="extra c-m">
        <h4 class="title">Extra services</h4>
{{--            座位--}}
            <div class="list">
                <div class="item-box">
                    <div class="item-title">
                        <div class="left">
                            <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-seat.svg')}}"></div>
                            <div class="con">
                                <div class="name">Seat selection</div>
                                <div class="des">Your selected seats</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                            <div class="mod">Modify</div>
                        </div>
                    </div>
                    <div class="item">
                        @foreach($records as $record)
                            <div class="pa-1">
                                <div class="name-box">
                                    <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                    <div class="name"><span>{{$record->getFlightInfo->flight_no}} to {{$record->getFlightInfo->couple_flight_no}}</span></div>
                                </div>
                            </div>
                        @endforeach


                        <div class="pa-2">
                            @foreach($records as $record)
                                <div class="li">
                                    <div class="name">
                                        {{$record->sub_name}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$record->name}}</div>
                                        <div class="des-2">( {{$record->passenger_type}} )</div>
                                    </div>
                                    <div class="num">Not Assigned</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
{{--行李--}}
            <div class="list">
                <div class="item-box">
                    <div class="item-title">
                        <div class="left">
                            <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-baggage.svg')}}"></div>
                            <div class="con">
                                <div class="name">Extra baggage</div>
                                <div class="des">Your baggage allowance</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                            <div class="mod">Modify</div>
                        </div>
                    </div>
                    <div class="item">

                        @foreach($records as $record)
                            <div class="pa-1">
                                <div class="name-box">
                                    <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                    <div class="name"><span>{{$record->getFlightInfo->flight_no}} to {{$record->getFlightInfo->couple_flight_no}}</span></div>
                                </div>
                            </div>
                        @endforeach

                        <div class="pa-2">

                            @foreach($records as $record)
                                <div class="li">
                                    <div class="name">
                                        {{$record->sub_name}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$record->name}}</div>
                                        <div>( {{$record->passenger_type}} )</div>
                                    </div>
                                    <div class="num">
                                        <div class="num-1">Baggage 20kg Free</div>
                                        <div class="num-2">USD 0.00</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
{{--        用餐--}}
            <div class="list">
                <div class="item-box">
                    <div class="item-title">
                        <div class="left">
                            <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-baggage.svg')}}"></div>
                            <div class="con">
                                <div class="name">Meals</div>
                                <div class="des">Your selected meals</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                            <div class="mod">Modify</div>
                        </div>
                    </div>
                    <div class="item">

                        @foreach($records as $record)
                            <div class="pa-1">
                                <div class="name-box">
                                    <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                    <div class="name"><span>{{$record->getFlightInfo->flight_no}} to {{$record->getFlightInfo->couple_flight_no}}</span></div>
                                </div>
                            </div>
                        @endforeach

                        <div class="pa-2">

                            @foreach($records as $record)
                                <div class="li">
                                    <div class="name">
                                        {{$record->sub_name}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$record->name}}</div>
                                        <div class="des-2">({{$record->passenger_type}} )</div>
                                    </div>
                                    <div class="num">No Meal</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        {{--        额外服务--}}
        <div class="list">
            <div class="item-box">
                <div class="item-title">
                    <div class="left">
                        <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-baggage.svg')}}"></div>
                        <div class="con">
                            <div class="name">Extra SSR</div>
                            <div class="des">Your extra services</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                        <div class="mod">Modify</div>
                    </div>
                </div>
                <div class="item">

                    @foreach($records as $record)
                        <div class="pa-1">
                            <div class="name-box">
                                <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                <div class="name"><span>{{$record->getFlightInfo->flight_no}} to {{$record->getFlightInfo->couple_flight_no}}</span></div>
                            </div>
                        </div>
                    @endforeach

                    <div class="pa-2">

                        @foreach($records as $record)
                            <div class="li">
                                <div class="name">
                                    {{$record->sub_name}}
                                </div>
                                <div class="des">
                                    <div class="des-1">{{$record->name}}</div>
                                    <div class="des-2">({{$record->passenger_type}} )</div>
                                </div>
                                <div class="num">No Extra SSR</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="c-info  c-m">
        <h4 class="title">Contact Information</h4>
        <div class="con">
            <div class="con-t">YANGYUJIE YANGYUJIE</div>
            <div class="con-des">
                Sichuan Global International Travel Service Company Limited<br/>
                SHUYUEDONGLU 288HAO<br/>
                B-709<br/>
                610000 CHENGDU<br/>
            </div>
            <div class="phone">
                <div class="item">
                    <div class="name">Mobile Phone</div>
                    <div class="num">: 8618080819620</div>
                </div>
                <div class="item">
                    <div class="name">Alternate Phone</div>
                    <div class="num">: 8618080819620</div>
                </div>
                <div class="item">
                    <div class="name">Email</div>
                    <div class="num">: 1327199713@qq.com</div>
                </div>
            </div>
        </div>
    </div>


    <div class="payment c-m">
        <h4 class="title">Payment details</h4>
        <div class="list">
            <div class="item">
                <div class="pa-1">
                    <div class="name-box">
                        <div class="name"><span>Total price </span>(including taxes, fees)</div>
                        <div class="num">USD 0.00</div>
                    </div>
                    <div class="icon">
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-[20px] text-[#333] group-open:rotate-180 transition" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"></path></svg>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

</body>

</html>
